<!doctype html>
<html lang="cn" window-frame="solid-with-shadow" window-resizable window-icon="./images/icon/icon.ico">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>BS Redis Desktop Client</title>
    <link rel="stylesheet" href="css/icon.css">
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
<div styleset="#title-bar" role="window-caption">
    <div class="title-bar-title" >
        <img class="app-icon" src="images/icon/app.png" height="16px"/>
        <span class="app-name">BS Redis Desktop Client</span>
    </div>
    <div class="title-bar-action">
        <button class="btn exit" id="exit"></button>
        <button class="btn max" id="max" ></button>
        <button class="btn min" id="reset"></button>
        <button class="btn mini" id="mini" role=window-minimize></button>
        <button class="btn set"></button>
        <button id="refresh" class="btn refresh"></button>
    </div>
</div>
<div class="body">
    <div id="conn-list"></div>
    <div id="frame"></div>
</div>
<script type="module" src="js/main.js"></script>
<script type="module">
    import * as env from "@env"
    const view = Window.this;
    const max = document.$("#max")
    const reset = document.$("#reset")
    const mini = document.$("#mini")
    max.onclick = function () {
        setTimeout(()=>{
            view.state = Window.WINDOW_FULL_SCREEN
            mini.style.display = "none"
            this.style.display = "none"
            reset.style.display = "inline-block"
        })

    }
    reset.onclick = function () {
        setTimeout(()=>{
            view.state = Window.WINDOW_SHOWN
            this.style.display = "none"
            max.style.display = "inline-block"
        })
    }

    view.on("statechange",()=>{
        if (view.state === Window.WINDOW_SHOWN) {
            reset.style.display = "none"
            mini.style.display = "inline-block"
            max.style.display = "inline-block"
        }
    })
</script>
</body>
</html>